<template>
	<div class="userDueAdd">
		<el-dialog  title="新增提醒记录" :visible.sync="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="50%" @close="entryCancel">
		  <div class="dialog-body" >
		  	<ul class="body-operation">
		  		<li>
		  			<span class="span1">联系电话:</span>
		  			<span class="span2" v-if="!message">
		  				<el-input v-model="relationInfo.relationMobile" placeholder="请输入电话"></el-input>
		  			</span>
		  			<span class="span2" v-if="message">
		  				<el-input disabled v-model="relationInfo.relationMobile" placeholder="请输入电话"></el-input>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">联系人姓名:</span>
		  			<span class="span2">
		  				<el-input v-model="relationInfo.relationName" placeholder="请输入姓名"></el-input>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">关系:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.relation" placeholder="请选择" @change="getRelation">
						    <el-option
						      v-for="item in relationOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
		  			</span>
		  		</li>
		  		<li>
		  			<span class="span1">联系状态:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.status" placeholder="请选择" @change="statusChange">
						    <el-option
						      v-for="item in statusOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>

		  			</span>
		  		</li>
				<!-- 还款意愿or是否愿意转告 -->
				<li v-if="relationFlag && relationSelf && statusFlag && statusSuc">
		  			<span class="span1">还款意愿:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.repayWish" placeholder="请选择">
						    <el-option
						      v-for="item in repayWishOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>

		  			</span>
		  		</li>
				<li v-if="relationFlag && !relationSelf && statusFlag && statusSuc">
		  			<span class="span1">是否愿意转告:</span>
		  			<span class="span2">
		  				<el-select v-model="relationInfo.isWishRemind" placeholder="请选择">
						    <el-option
						      v-for="item in wishCallOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>

		  			</span>
		  		</li>
				<!--  -->


		  		<li>
		  			<span class="span1">备注:</span>
		  			<span class="span2">
		  				<el-input
						  type="textarea"
						  :rows="2"
						  placeholder="请输入内容"
						  v-model="relationInfo.content">
						</el-input>
		  			</span>
		  		</li>
		  	</ul>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="entryCancel">取 消</el-button>
		    <el-button type="primary" @click="entrySure">确 定</el-button>
		  </span>
	  </el-dialog>
	</div>
</template>
<script>
	export default({
		props:["queryMsg","dialogVisibleShow","message"],
		data(){
			return{
				relationOptions:[],
				statusOptions: [],
				dialogVisible: true,
				relationInfo:{
					collectionUserId: this.localData('get', 'login_user').id,
					collectionUserRealname: this.localData('get', 'login_user').realName,
					borrowId: this.queryMsg.borrowId,
					relationName:'',
					relationMobile: '',
					relation: '',
					status: '',
          content: '',
          remindName:""
				},
				relationFlag:false,
				relationSelf:false,
				statusFlag:false,
				statusSuc:false,
				wishCallOptions:[
					{
                        value: 1,
                        label:"是"
                    },
                    {
                        value: '0',
                        label:"否"
					},
					{
                        value: -1,
                        label:"不祥"
                    }
				],
				repayWishOptions:[
					{
                        value: 1,
                        label:"有"
                    },
                    {
                        value: '0',
                        label:"无"
					},
					{
                        value: -1,
                        label:"不详"
                    }
				]
			}
		},
		methods:{
			// 关系切换
			getRelation(val){
				let that = this;
				if(val){
					that.relationFlag = true;
					if(val == 1){
						that.relationSelf = true
					}else{
						that.relationSelf = false
					}
				}else{
					that.relationFlag = false;
				}
			},
			//状态切换
			statusChange(val){
				let that = this;
				if(val){
					that.statusFlag = true;
					if(val == 24){
						that.statusSuc = true
					}else{
						that.statusSuc = false
					}
				}else{
					that.statusFlag = false;
				}
			},
			// 状态
			status(){
				let that = this;
				return new Promise(function(resolve,reject){
					that.ajaxJson({
			            url: '/static/order/custom/remindStatus',
			            success: function (res) {
				            if (res.code == '0') {
				            	let data = res.data;
				            	data.forEach(function(item){
				            		that.statusOptions.push({
				            			value: item.id,
	          							label: item.resource
				            		})

				            	})
				            	resolve()
				            }
				         }
			        })
				})
			},
			//关系
			relation(){
				let that = this;
				return new Promise(function(resolve,reject){
					that.ajaxJson({
			            url: '/static/collection/relationList',
			            success: function (res) {
				            if (res.code == '0') {
				            	let data = res.data;
				            	data.forEach(function(item){
				            		that.relationOptions.push({
				            			value: item.id,
	          							label: item.resource
				            		})

				            	})
				            	resolve()
				            }
				         }
			        })
				})
			},

			//取消
			entryCancel(){
				let that = this;
				that.relationInfo = {
					collectionUserId: this.localData('get', 'login_user').id,
					collectionUserRealname: this.localData('get', 'login_user').realName,
					borrowId: this.queryMsg.borrowId,
					relationName:'',
					relationMobile: '',
					status: '',
					content: '',
					relation: ''
				}
				that.relationFlag = false;
				that.$emit('userCollection',{
	            	dialogVisibleShow: false
	            })

			},
			//确定添加
			entrySure(){
				let that = this;
		        if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.relationInfo.relationMobile)){
		        	that.showMsg("请输入正确的手机号","error")
		            return
		        }
		        if(!that.relationInfo.relationName){
		        	that.showMsg("请输入联系人姓名","error")
		            return
		        }
		        if(!that.relationInfo.relation){
		        	that.showMsg("请输入选择关系","error")
		            return
		        }
		        if(!that.relationInfo.status){
		        	that.showMsg("请选择联系状态","error")
		            return
				}
				if(that.relationFlag && that.relationSelf && !that.relationInfo.repayWish && that.statusSuc){
					that.showMsg("请选择还款意愿","error")
		            return
				}
				if(that.relationFlag && !that.relationSelf && !that.relationInfo.isWishRemind && that.statusSuc){
					that.showMsg("请选择转告意愿","error")
		            return
				}
		        if(!that.relationInfo.content){
		        	that.showMsg("请输入备注","error")
		            return
            }

            // that.relationInfo.remindName = that.queryMsg.remindName || localData("get",'login_user').nickname

		        that.ajaxJson({
		            url: '/order/custom/saveRemind',
		            data: that.relationInfo,
		            success: function (res) {
			            if (res.code == '0') {
			            	that.$message({
				                type: 'success',
				                message: '添加成功!'
				            });
				            that.entryCancel();
				            that.$emit('userCollection',{
				            	dialogVisibleShow: false
				            })
			            }
			         }
		        })
			},
		},
		created(){
			let that = this;
			if(that.message){
				that.relationInfo.relationName = that.message.relationName,
				that.relationInfo.relationMobile = that.message.relationMobile
			}
			Promise.all([
				that.status(),
				that.relation()
			]).then(arr=>{
				if(that.dialogVisibleShow==true){
					that.dialogVisible = true;
				}
			})
		}
	})
</script>
<style lang="less">
	.userDueAdd{
		.dialog-body{
			width:100%;
			.body-message{
				width:100%;
				overflow: hidden;
				li{
					width:33.3%;
					float: left;
					line-height: 30px;
					.span1{
						color:#999;
					}
					.span2{
						color:#000;
					}
				}
			}
			.body-operation{
				margin-top:20px;
				li{
					display: flex;
					line-height: 40px;
					margin-bottom: 10px;
					.span1{
						width:120px;
						flex:none;
						color:#999;
						text-align: right;

					}
					.span2{
						flex:1;
						margin-left: 20px;
						.el-input{
							width:50% !important;
						}
						.el-select{
							.el-input{
								width:100% !important;
							}
						}
						.el-input__inner{
							width:100%;
							height:36px;
							padding:0 5px;
						}
						.el-checkbox__inner{

						}
					}
				}
			}
		}
	}
</style>
